<template>
	<view class="main-page">
		<!-- 顶部轮播图 -->
		<u-swiper
			:list="bannerList"
			height="200"
			indicator
			indicatorMode="dot"
			class="main-banner"
			:imageMode="'aspectFill'"
			:keyName="'imageUrl'"
		></u-swiper>

		<!-- 搜索框 -->
		<view class="search-bar">
			<u-search
				v-model="search"
				placeholder="搜索"
				:show-action="true"
				action-text="搜索"
				@search="onSearch"
			/>
		</view>

		<!-- 四大专区 -->
		<view class="zone-list">
			<view class="zone-item" v-for="(item, idx) in zones" :key="idx" @click="handleZoneClick(item.title)">
				<u-icon :name="item.icon" :size="36" :color="item.color" />
				<view class="zone-title">{{ item.title }}</view>
			</view>
		</view>

		<!-- 栏目窗口区 -->
		<view class="section-windows">
			<!-- 动态渲染栏目卡片 -->
			<view class="section-card" v-for="column in columnList" :key="column.columnId">
				<view class="section-title-bar">
					<view class="section-title">{{ column.name }}</view>
					<view class="section-more" @click="handleMoreClick(column.columnId)">
						<view>查看更多</view>
						<u-icon name="arrow-right" size="16" color="#999" class="section-more-icon" />
					</view>
				</view>
				<!-- 根据栏目ID显示不同内容 -->
				<template v-if="column.columnId === 1">
					<!-- 热门活动栏目卡片 -->
					<u-loadmore :status="loading ? 'loading' : 'nomore'" v-if="loading || hotList.length === 0" />
					<view class="hot-list" v-else>
						<view class="hot-item" v-for="(item, idx) in hotList" :key="idx">
							<image class="hot-img" :src="item.img" mode="aspectFill" />
							<view class="hot-info">
								<view class="hot-title">{{ item.title.length > 15 ? item.title.slice(0, 15) + ' . . .' : item.title }}</view>
								<view class="hot-desc">{{ item.desc.length > 20 ? item.desc.slice(0, 18) + ' . . .' : item.desc }}</view>
								<view class="hot-time">{{ item.time }}</view>
								<view class="hot-participants">
									<u-icon name="account" size="24"  color="#2979ff"  />
									<text class="participants-count">{{ item.currentParticipants }}/{{ item.maxParticipants }}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="column.columnId === 2">
					<!-- 热门课程栏目卡片 -->
					<u-loadmore :status="courseLoading ? 'loading' : 'nomore'" v-if="courseLoading || courseList.length === 0" />
					<view class="course-list" v-else>
						<view class="course-item" v-for="(item, idx) in courseList" :key="idx" @click="toCourseInfo(item.courseId)">
							<image class="course-img" :src="item.img" mode="aspectFill" />
							<view class="course-info">
								<view class="course-title">{{ item.title.length > 15 ? item.title.slice(0, 15) + ' . . .' : item.title }}</view>
								<view class="course-desc">{{ item.desc.length > 20 ? item.desc.slice(0, 18) + ' . . .' : item.desc }}</view>
								<view class="course-time">
									<text :class="['course-type', item.courseType === '线上课' ? 'online-course' : 'offline-course']">{{ item.courseType }}</text>
									<text class="course-hours">{{ item.hours }}课时</text>
								</view>
								<view class="course-meta">
									<text :class="['course-price', (!item.price || item.price === 0) ? 'free-price' : 'paid-price']">{{ (!item.price || item.price === 0) ? '免费' : '¥' + item.price }}</text>
									<text class="course-stock"  >已购{{ item.orderCount }}份</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="column.columnId === 3">
					<!-- 秒杀课程栏目卡片 -->
					<u-loadmore :status="seckillLoading ? 'loading' : 'nomore'" v-if="seckillLoading || seckillList.length === 0" />
					<view class="seckill-list" v-else>
						<view class="seckill-item" v-for="(item, idx) in seckillList" :key="idx">
							<image class="seckill-img" :src="item.img" mode="aspectFill" />
							<view class="seckill-info">
								<view class="seckill-title">{{ item.title }}</view>
								<view class="seckill-row">
									<view class="seckill-row-left">
										<text :class="['course-type', item.courseType === '线上课' ? 'online-course' : 'offline-course']">{{ item.courseType }}</text>
										<text class="course-hours">{{ item.hours }}课时</text>
									</view>
									<view class="seckill-row-right">
										<text class="seckill-label">限购数量：</text>
										<text class="seckill-value">{{ item.studentLimitCount }}</text>
									</view>
								</view>
								<view class="seckill-row">
									<view class="seckill-row-left">
										<text class="seckill-seckill-price">¥{{ item.seckillPrice }}</text>
										<text class="seckill-price">¥{{ item.price }}</text>
									</view>
									<view class="seckill-row-right">
										<text class="seckill-label">秒杀数量：</text>
										<text class="seckill-value">{{ item.totalLimit }}</text>
									</view>
								</view>
								<view class="seckill-row">
									<text class="seckill-value">{{ item.startTime }} - {{ item.endTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {getBanner,getColumnList,getCourse,getSeckill,getActivity} from '@/api/main.js'
	export default {
		data() {
			return {
				search: '',
				bannerList: [],
				bannerLoading: false,
				columnList: [],
				zones: [
					{ title: '活动专区', icon: 'grid', color: '#7bf479' },
					{ title: '课程专区', icon: 'file-text', color: '#F8BBD0' },
					{ title: '秒杀专区', icon: 'hourglass', color: '#80DEEA' },
					{ title: '绘画专区', icon: 'edit-pen', color: '#9c4d4d' },
				],
				hotList: [],
				courseList: [],
				windowInfo: null,
				loading: false,
				courseLoading: false,
				defaultImage: '/static/img/ai.jpg',
				baseUrl: 'http://localhost:8001',
				seckillList: [],
				seckillLoading: false
			}
		},
		onLoad() {
			this.windowInfo = uni.getWindowInfo()
			this.loadBannerList()
			this.loadColumnList()
			this.loadHotList()
			this.loadCourseList()
			this.loadSeckillList()
		},
		methods: {
			onSearch(val) {
				if (!val.trim()) {
					uni.showToast({ title: '请输入搜索内容', icon: 'none' })
					return
				}
				uni.showToast({ title: '搜索：' + val, icon: 'none' })
			},
			async loadBannerList() {
				this.bannerLoading = true
				try {
					const campusId = uni.getStorageSync('campusId');
					const res = await getBanner(campusId)
					if (res && res.data) {
						this.bannerList = (res.data.list || []).map(item => ({
							imageUrl: item.imageUrl || this.defaultImage
						}))
					}
					
					
					// const res = await uni.request({
					// 	url: `${this.baseUrl}/main/getBanner`,
					// 	method: 'GET'
					// });
					// console.log(res)
					// if (res && res.data.data) {
					// 	this.bannerList = (res.data.data.list || []).map(item => ({
					// 		imageUrl: item.imageUrl || this.defaultImage
							
					// 	}))
					// }
					console.log(this.bannerList)
				} catch (e) {
					console.error('加载轮播图失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
					// 失败时显示默认数据
					this.bannerList = [{
						imageUrl: this.defaultImage
					}]
				} finally {
					this.bannerLoading = false
				}
			},
			async loadColumnList() {
				try {
					const campusId = uni.getStorageSync('campusId');
					const res = await getColumnList(campusId)
					
					if (res && res.data) {
						this.columnList = (res.data.list || []).filter(item => item.isVisible === 1)
					}
				} catch (e) {
					console.error('加载栏目列表失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},
			async loadHotList() {
				this.loading = true
				try {
					const campusId = uni.getStorageSync('campusId');
					const res = await getActivity(campusId)
					
					if (res && res.data) {
						// 优化图片处理，优先使用接口返回的图片
						this.hotList = (res.data.list || []).map(item => ({
							img: item.url || this.defaultImage,
							title: item.title || '无标题',
							desc: item.description || '暂无描述',
							time: item.startTime && item.endTime 
								? `${item.startTime} - ${item.endTime}`
								: '时间未定',
							currentParticipants: item.currentParticipants || 0,
							maxParticipants: item.maxParticipants || 0
						}))
					}
				} catch (e) {
					console.error('加载热门活动失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
					// 失败时显示默认数据
					this.hotList = [
						{
							img: this.defaultImage,
							title: '示例活动',
							desc: '这是默认展示的活动',
							time: '2023-01-01 - 2023-01-31',
							currentParticipants: 0,
							maxParticipants: 0
						}
					]
				} finally {
					this.loading = false
				}
			},
			async loadCourseList() {
				this.courseLoading = true
				try {
					const campusId = uni.getStorageSync('campusId');
					const res = await getCourse(campusId)
					if (res && res.data) {
						this.courseList = (res.data.list || []).map(item => ({
							courseId: item.courseId,
							img: item.url || this.defaultImage,
							title: item.courseName || '无标题',
							desc: item.courseDescription || '暂无描述',
							time: item.startTime && item.endTime 
								? `${item.startTime} - ${item.endTime}`
								: '时间未定',
							hours: item.hours || 0,
							orderCount: item.orderCount || '0',
							courseStock: item.courseStock || 0,
							courseType: item.courseType || '未分类',
							price: item.price || 0
						}))
					}
				} catch (e) {
					console.error('加载热门课程失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				} finally {
					this.courseLoading = false
				}
			},
			async loadSeckillList() {
				this.seckillLoading = true
				try {
					const campusId = uni.getStorageSync('campusId');
					const res = await getSeckill(campusId)
					if (res && res.data) {
						this.seckillList = (res.data.list || []).map(item => ({
							img: item.url || this.defaultImage,
							title: item.title || '无标题',
							courseType: item.courseType || '未分类',
							hours: item.hours || 0,
							price: item.price || 0,
							seckillPrice: item.seckillPrice || 0,
							studentLimitCount: item.studentLimitCount || 0,
							totalLimit: item.totalLimit || 0,
							soldCount: item.soldCount || 0,
							startTime: item.startTime || '',
							endTime: item.endTime || ''
						}))
					}
				} catch (e) {
					uni.showToast({ title: '加载失败，请重试', icon: 'none' })
				} finally {
					this.seckillLoading = false
				}
			},
			toCourseInfo(courseId){
				uni.navigateTo({
					url: '/pages/course/course?courseId=' + courseId
				});
			},
			handleMoreClick(columnId) {
				switch(columnId) {
					case 1: // 热门活动
						uni.navigateTo({
							url: '/pages/activity/activity'
						});
						break;
					case 2: // 热门课程
						uni.navigateTo({
							url: '/pages/course-area/course-area'
						});
						break;
					case 3: // 秒杀课程
						uni.navigateTo({
							url: '/pages/seckill/seckill'
						});
						break;
					default:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
				}
			},
			handleZoneClick(title) {
				switch(title) {
					case '课程专区':
						uni.navigateTo({
							url: '/pages/course-area/course-area'
						});
						break;
					case '活动专区':
						uni.navigateTo({
							url: '/pages/activity/activity'
						});
						break;
					case '秒杀专区':
						uni.navigateTo({
							url: '/pages/seckill/seckill'
						});
						break;
					case '绘画专区':
						uni.navigateTo({
							url: '/pages/art/art'
						});
						break;
					default:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
				}
			}
		}
	}
</script>

<style scoped>
.main-page {
	background: #f7f7f7;
	min-height: 100vh;
	padding-bottom: 120rpx;
}
/* .navbar {
	height: 80rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
	position: sticky;
	top: 0;
	z-index: 100;
}
.navbar-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #222;
} */
.main-banner {
	margin: 0 0 16rpx 0;
}
.search-bar {
	padding: 8px 24rpx 16rpx 24rpx;
	background-color: #e6e6e6;
}
.zone-list {
	display: flex;
	justify-content: space-around;
	background: #fff;
	padding: 24rpx 0 16rpx 0;
	border-radius: 16rpx;
	margin: 0 16rpx 16rpx 16rpx;
}
.zone-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.zone-title {
	margin-top: 8rpx;
	font-size: 26rpx;
	color: #333;
}
.section-windows {
	padding: 0 16rpx;
}
.section-card {
	background: #fff;
	border-radius: 18rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	padding-bottom: 5rpx;
}
.section-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 24rpx 20rpx 24rpx;
	border-bottom: 1rpx solid #d9d9d9;
}
.section-title {
	font-size: 30rpx;
	font-weight: bold;
}
.section-more {
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
}
.section-more-icon {
	margin-left: 10rpx;
}
.hot-list {
	padding: 0;
}
.hot-item {
	margin-top: 15rpx;
	display: flex;
	background: #fff;
	overflow: hidden;
	border-top: 1rpx solid #efefef;
	border-bottom: 1rpx solid #efefef;
}
.hot-img {
	width: 200rpx;
	height: 200rpx;
	background: #eee;
	flex-shrink: 0;
}
.hot-info {
	flex: 1;
	padding: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hot-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #222;
}
.hot-desc {
	font-size: 24rpx;
	color: #888;
	margin: 4rpx 0;
}
.hot-time {
	font-size: 22rpx;
	color: #bbb;
	display: flex;
	align-items: center;
}
.course-type {
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-right: 12rpx;
	font-size: 22rpx;
}
.online-course {
	background: #e6f7ff;
	color: #1890ff;
}
.offline-course {
	background: #f6ffed;
	color: #52c41a;
}
.course-hours {
	color: #faad14;
	font-size: 22rpx;
}
.course-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8rpx;
}
.course-price {
	font-size: 24rpx;
	font-weight: bold;
}
.free-price {
	color: #52c41a;
}
.paid-price {
	color: #ff4d4f;
}
.course-stock {
	font-size: 22rpx;
	color:#2979ff;
}
.hot-participants {
	display: flex;
	align-items: center;
	margin-top: 8rpx;
}
.participants-count {
	font-size: 22rpx;
	color: #666;
	margin-left: 8rpx;
}
.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100rpx;
	background: #fff;
	display: flex;
	border-top: 1rpx solid #eee;
	z-index: 99;
}
.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 22rpx;
}
.tabbar-item.active {
	color: #2979ff;
}
.tabbar-text {
	font-size: 22rpx;
}
.course-list {
	padding: 0;
}
.course-item {
	margin-top: 15rpx;
	display: flex;
	background: #fff;
	overflow: hidden;
	border-top: 1rpx solid #efefef;
	border-bottom: 1rpx solid #efefef;
}
.course-img {
	width: 200rpx;
	height: 200rpx;
	background: #eee;
	flex-shrink: 0;
}
.course-info {
	flex: 1;
	padding: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.course-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #222;
}
.course-desc {
	font-size: 24rpx;
	color: #888;
	margin: 4rpx 0;
}
.course-time {
	font-size: 22rpx;
	color: #bbb;
	display: flex;
	align-items: center;
}
.seckill-section-card {
	background: #fff;
	border-radius: 18rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	padding-bottom: 5rpx;
}
.seckill-section-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 24rpx 20rpx 24rpx;
	border-bottom: 1rpx solid #d9d9d9;
}
.seckill-section-title {
	font-size: 30rpx;
	font-weight: bold;
}
.seckill-section-more {
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
}
.seckill-section-more-icon {
	margin-left: 10rpx;
}
.seckill-list {
	padding: 0;
}
.seckill-item {
	margin-top: 15rpx;
	display: flex;
	background: #fff;
	overflow: hidden;
	border-top: 1rpx solid #efefef;
	border-bottom: 1rpx solid #efefef;
}
.seckill-img {
	width: 200rpx;
	height: 200rpx;
	background: #eee;
	flex-shrink: 0;
}
.seckill-info {
	flex: 1;
	padding: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.seckill-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #222;
	margin-bottom: 8rpx;
}
.seckill-row {
	display: flex;
	align-items: center;
	font-size: 22rpx;
	margin-bottom: 4rpx;
	flex-wrap: wrap;
	justify-content: space-between;
}
.seckill-row-left {
	display: flex;
	align-items: center;
	flex: 1;
}
.seckill-row-right {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.seckill-label {
	color: #888;
	margin-right: 8rpx;
}
.seckill-value {
	color: #bdbdbd;
	margin-right: 16rpx;
}
.seckill-seckill-price {
	color: #ff4d4f;
	font-weight: bold;
	font-size: 30rpx;
	margin-right: 16rpx;
}
.seckill-price {
	color: #bbb;
	text-decoration: line-through;
	margin-right: 16rpx;
}
</style>